<template>
  <view class="loginbox">
    <view class="title animate__animated animate__heartBeat animate__infinite" style="color: pink;">
      点击获取微信头像和昵称
    </view>
    <button class="avatar" open-type="chooseAvatar" @chooseavatar="changeAvatar">
      <image :src="avatarUrl" v-if="avatarUrl"></image>
      <text v-else class="animate__animated animate__swing animate__infinite">点击获取头像</text>
    </button>
    <input type="nickname" class="weui-input" placeholder="点击获取昵称" @change="getNickname" />

    <view class="btn-img" @click="upmsg">
      确认
    </view>
  </view>
</template>

<script>
  // import {
  //   uploadtempFile
  // } from "@/utils/upload.js"
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['userinfo', 'redirectInfo'])
    },
    name: "wxlogin",
    data() {
      return {
        avatarUrl: "",
        nickname: ""
      };
    },
    methods: {
      ...mapMutations('m_user', ['updatauserimgname', 'updataToken', 'updateRedirectInfo']),
      changeAvatar(e) {
        var temp = e.detail.avatarUrl;
        this.avatarUrl = temp
        // uploadtempFile(temp).then(res => {
        // this.avatarUrl = res
        // })
      }, //临时图片
      getNickname(e) {
        // console.log(e.detail.value)
        this.nickname = e.detail.value
      }, //临时昵称
      upmsg() {
        var data = {
          avatar: this.avatarUrl,
          nickname: this.nickname
        }
        this.updatauserimgname(data)
        this.getToken()
        // updateProfileAPI(data).then(res => {
        //   this.$emit("over")
        // })
      }, //确认上传
      async getToken() {
        const obj = JSON.parse(uni.getStorageSync('userinfo') || '{}')
        const [err, res] = await uni.login().catch(err => err)
        if (res.errMsg !== "login:ok") return uni.$showMsg('登录失败~')
        // const query = {
        //   code:res.code,
        //   encryptedData:obj.encryptedData,
        //   iv:obj.iv,
        //   rawData:obj.rawData,
        //   signature:obj.signature
        // }
        // const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
        // if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
        this.updataToken(res.code)
        uni.$showMsg('登录成功')
        this.navigateBack()
      },
      // 返回登录之前的页面
      navigateBack() {
        // redirectInfo 不为 null，并且导航方式为 switchTab
        if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
          // 调用小程序提供的 uni.switchTab() API 进行页面的导航
          uni.reLaunch({
            // 要导航到的页面地址
            url: this.redirectInfo.from,
            // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
            complete: () => {
              this.updateRedirectInfo(null)
            }
          })
        }
      }
    }

  }
</script>

<style lang="less" scoped>
  .loginbox {
    border: 1rpx solid transparent;
    border-radius: 20px;
    width: 500rpx;
    height: 500rpx;
    background-image: url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png), url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png);
    background-position: 0 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 14%;
    padding: 30rpx;
    background-color: #fff;
    ;

    .title {
      text-align: center;
      line-height: 80rpx;
      font-weight: bold;
      font-size: 25rpx;
    }

    .avatar {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      background-color: #efefef;
      margin-top: 20rpx;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
      }

      text {
        color: #666;
        font-size: 20rpx;
      }
    }

    .weui-input {
      background-color: #efefef;
      margin-top: 30rpx;
      height: 55rpx;
      font-size: 25rpx;
      line-height: 70rpx;
      border-radius: 5rpx;
      padding-left: 10rpx;
    }

    .btn-img {
      width: 50%;
      height: 90rpx;
      border-radius: 50rpx;
      background-color: #E93E34;
      line-height: 90rpx;
      color: #fff;
      text-align: center;
      margin: 5px auto;
    }
  }
</style>
